<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>vue-入门Day.02 | 让技术更简单</title>

  <!-- keywords -->
  

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="处理用户输入v-on(缩写：@，启用事件处理函数后面跟着行动事件)启动事件处理函数后在methods方法中调用并写需要运行的代码例： 123456&lt;template&gt;&lt;!--不要在此标签中出现逻辑语  --&gt;  &lt;div&gt;      &lt;!-- &amp;#123;&amp;#123;data中的属性&amp;#125;&amp;#125;表示插值 --&gt;      &lt;h2&amp;g">
<meta property="og:type" content="article">
<meta property="og:title" content="vue-入门Day.02">
<meta property="og:url" content="http://example.com/2022/03/16/vue-day.02/index.html">
<meta property="og:site_name" content="让技术更简单">
<meta property="og:description" content="处理用户输入v-on(缩写：@，启用事件处理函数后面跟着行动事件)启动事件处理函数后在methods方法中调用并写需要运行的代码例： 123456&lt;template&gt;&lt;!--不要在此标签中出现逻辑语  --&gt;  &lt;div&gt;      &lt;!-- &amp;#123;&amp;#123;data中的属性&amp;#125;&amp;#125;表示插值 --&gt;      &lt;h2&amp;g">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2022-03-16T09:08:26.000Z">
<meta property="article:modified_time" content="2022-03-17T05:25:37.527Z">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">
  
    <link rel="alternative" href="/atom.xml" title="让技术更简单" type="application/atom+xml">
  
  
    <link rel="icon" href="http://7xkj1z.com1.z0.glb.clouddn.com/head.jpg">
  
  
<link rel="stylesheet" href="/css/style.css">

  
  

  
<script src="//cdn.bootcss.com/require.js/2.3.2/require.min.js"></script>

  
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>


  
<meta name="generator" content="Hexo 6.1.0"></head>
<body>
  <div id="container">
    <div id="particles-js"></div>
    <div class="left-col">
    <div class="overlay"></div>
<div class="intrude-less">
	<header id="header" class="inner">
		<a href="/" class="profilepic">
			
			<img lazy-src="http://7xkj1z.com1.z0.glb.clouddn.com/head.jpg" class="js-avatar">
			
		</a>

		<hgroup>
		  <h1 class="header-author"><a href="/"></a></h1>
		</hgroup>

		

		
			<div class="switch-btn">
				<div class="icon">
					<div class="icon-ctn">
						<div class="icon-wrap icon-house" data-idx="0">
							<div class="birdhouse"></div>
							<div class="birdhouse_holes"></div>
						</div>
						<div class="icon-wrap icon-ribbon hide" data-idx="1">
							<div class="ribbon"></div>
						</div>
						
						<div class="icon-wrap icon-link hide" data-idx="2">
							<div class="loopback_l"></div>
							<div class="loopback_r"></div>
						</div>
						
						
					</div>
					
				</div>
				<div class="tips-box hide">
					<div class="tips-arrow"></div>
					<ul class="tips-inner">
						<li>菜单</li>
						<li>标签</li>
						
						<li>友情链接</li>
						
						
					</ul>
				</div>
			</div>
		

		<div class="switch-area">
			<div class="switch-wrap">
				<section class="switch-part switch-part1">
					<nav class="header-menu">
						<ul>
						
							<li><a href="/">主页</a></li>
				        
							<li><a href="/archives">所有文章</a></li>
				        
						</ul>
					</nav>
					<nav class="header-nav">
						<div class="social">
							
						</div>
					</nav>
				</section>
				
				
				<section class="switch-part switch-part2">
					<div class="widget tagcloud" id="js-tagcloud">
						
					</div>
				</section>
				
				
				
				<section class="switch-part switch-part3">
					<div id="js-friends">
					
			          <a target="_blank" class="main-nav-link switch-friends-link" href="https://github.com/smackgg/hexo-theme-smackdown">smackdown</a>
			        
			        </div>
				</section>
				

				
			</div>
		</div>
	</header>				
</div>
    </div>
    <div class="mid-col">
      <nav id="mobile-nav">
  	<div class="overlay">
  		<div class="slider-trigger"></div>
  		<h1 class="header-author js-mobile-header hide"></h1>
  	</div>
	<div class="intrude-less">
		<header id="header" class="inner">
			<div class="profilepic">
				<img lazy-src="http://7xkj1z.com1.z0.glb.clouddn.com/head.jpg" class="js-avatar">
			</div>
			<hgroup>
			  <h1 class="header-author"></h1>
			</hgroup>
			
			<nav class="header-menu">
				<ul>
				
					<li><a href="/">主页</a></li>
		        
					<li><a href="/archives">所有文章</a></li>
		        
		        <div class="clearfix"></div>
				</ul>
			</nav>
			<nav class="header-nav">
				<div class="social">
					
				</div>
			</nav>
		</header>				
	</div>
</nav>
      <div class="body-wrap"><article id="post-vue-day.02" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2022/03/16/vue-day.02/" class="article-date">
  	<time datetime="2022-03-16T09:08:26.000Z" itemprop="datePublished">2022-03-16</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      vue-入门Day.02
      
    </h1>
  

      </header>
      
      <div class="article-info article-info-post">
        
        

        
        <div class="clearfix"></div>
      </div>
      
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="处理用户输入"><a href="#处理用户输入" class="headerlink" title="处理用户输入"></a>处理用户输入</h2><h3 id="v-on-缩写：-，启用事件处理函数后面跟着行动事件"><a href="#v-on-缩写：-，启用事件处理函数后面跟着行动事件" class="headerlink" title="v-on(缩写：@，启用事件处理函数后面跟着行动事件)"></a>v-on(缩写：@，启用事件处理函数后面跟着行动事件)</h3><p>启动事件处理函数后在methods方法中调用并写需要运行的代码<br>例：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span><span class="comment">&lt;!--不要在此标签中出现逻辑语  --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="comment">&lt;!-- &#123;&#123;data中的属性&#125;&#125;表示插值 --&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;product&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;contentStr&quot;</span> <span class="attr">v-bind:title</span>=<span class="string">&quot;str2&quot;</span> &gt;</span>调整h2的内容<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">      <span class="comment">&lt;!-- v-bind 绑定后面接的为data中的数据 --&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">export default <span class="punctuation">&#123;</span></span><br><span class="line">    components<span class="punctuation">:</span> <span class="punctuation">&#123;</span> <span class="comment">//components是一个方法，使用子组件</span></span><br><span class="line">        VueList<span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    data()<span class="punctuation">&#123;</span><span class="comment">//定义数据</span></span><br><span class="line">        <span class="comment">// 必须要有返回值</span></span><br><span class="line">        return<span class="punctuation">&#123;</span></span><br><span class="line">        str2<span class="punctuation">:</span>&#x27;hello world&#x27;<span class="punctuation">,</span></span><br><span class="line">        num<span class="punctuation">:</span><span class="number">10</span><span class="punctuation">,</span></span><br><span class="line">        isShow<span class="punctuation">:</span><span class="keyword">true</span><span class="punctuation">,</span></span><br><span class="line">        <span class="punctuation">&#125;</span></span><br><span class="line"></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    methods<span class="punctuation">:</span><span class="punctuation">&#123;</span><span class="comment">//事件处理函数的方法，定义方法</span></span><br><span class="line">        contentStr<span class="punctuation">:</span>function()<span class="punctuation">&#123;</span></span><br><span class="line">            <span class="comment">// console.log(&#x27;hhhhhh&#x27;);</span></span><br><span class="line">            <span class="comment">// this.str2=&quot;new&quot;</span></span><br><span class="line">            <span class="comment">// this.isShow=!this.isShow;</span></span><br><span class="line">            <span class="comment">// this.num=this.num+1;</span></span><br><span class="line">            this.str2=&#x27;www&#x27;<span class="comment">//父组件改变，子组件也随之改变</span></span><br></pre></td></tr></table></figure>
<h2 id="组件化应用构建（父组件和子组件）"><a href="#组件化应用构建（父组件和子组件）" class="headerlink" title="组件化应用构建（父组件和子组件）"></a>组件化应用构建（父组件和子组件）</h2><h3 id="定义"><a href="#定义" class="headerlink" title="定义"></a>定义</h3><p>组件系统是<strong>Vue</strong> 的另一个重要概念，因为它是一种抽象，允许我们使用<strong>小型</strong>、<strong>独立</strong>和通常<strong>可复用</strong>的组件构建大型应用。主要分为<strong>父组件</strong>和<strong>子组件</strong>，在一个vue文件中引用另一个vue文件，那么这个文件就为<em>父组件</em>，被引用的文件就为<em>子组件</em>。</p>
<h3 id="数据的传递"><a href="#数据的传递" class="headerlink" title="数据的传递"></a>数据的传递</h3><h4 id="父组件传数据给子组件"><a href="#父组件传数据给子组件" class="headerlink" title="父组件传数据给子组件"></a>父组件传数据给子组件</h4><p><em><strong>父传子</strong></em>：在父组件中通过<code>v-bind</code>绑定数据，在子组件中再通过<code>props</code><strong>接收</strong>父组件的数据，父组件传递的数据，如果子组件没有通过<code>props</code>接收，都会统一存放在<code>$attrs</code>中。如果接收了，<code>$attrs</code>中将会减去接收的这个值，再通过插值的方式把接收数据插到标签中，在父组件设定一个事件处理函数，通过<strong>改变父组件</strong>的数据，子组件也会<strong>随之改变</strong>。</p>
<p>例子：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 父组件 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span><span class="comment">&lt;!--不要在此标签中出现逻辑语  --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="comment">&lt;!-- &#123;&#123;data中的属性&#125;&#125;表示插值 --&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;product&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;contentStr&quot;</span> <span class="attr">v-bind:title</span>=<span class="string">&quot;str2&quot;</span> &gt;</span>调整h2的内容<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">      <span class="comment">&lt;!-- v-bind 绑定后面接的为data中的数据 --&gt;</span></span><br><span class="line">       <span class="tag">&lt;<span class="name">VueList</span> @<span class="attr">index</span>=<span class="string">&quot;change&quot;</span> <span class="attr">data-index</span>=<span class="string">&quot;123&quot;</span> <span class="attr">:test</span>=<span class="string">&quot;str2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">VueList</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">data()<span class="punctuation">&#123;</span><span class="comment">//定义数据</span></span><br><span class="line">        <span class="comment">// 必须要有返回值</span></span><br><span class="line">        return<span class="punctuation">&#123;</span></span><br><span class="line">        str2<span class="punctuation">:</span>&#x27;hello world&#x27;<span class="punctuation">,</span></span><br><span class="line">        num<span class="punctuation">:</span><span class="number">10</span><span class="punctuation">,</span></span><br><span class="line">        isShow<span class="punctuation">:</span><span class="keyword">true</span><span class="punctuation">,</span></span><br><span class="line">        <span class="punctuation">&#125;</span></span><br><span class="line"></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    methods<span class="punctuation">:</span><span class="punctuation">&#123;</span><span class="comment">//事件处理函数的方法，定义方法</span></span><br><span class="line">        contentStr<span class="punctuation">:</span>function()<span class="punctuation">&#123;</span></span><br><span class="line">            <span class="comment">// console.log(&#x27;hhhhhh&#x27;);</span></span><br><span class="line">            <span class="comment">// this.str2=&quot;new&quot;</span></span><br><span class="line">            <span class="comment">// this.isShow=!this.isShow;</span></span><br><span class="line">            <span class="comment">// this.num=this.num+1;</span></span><br><span class="line">            this.str2=&#x27;www&#x27;<span class="comment">//父组件改变，子组件也随之改变</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 子组件 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;item in list&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;item&quot;</span>&gt;</span>&#123;&#123;item.name&#125;&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123;test&#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">export default <span class="punctuation">&#123;</span></span><br><span class="line">    props<span class="punctuation">:</span><span class="punctuation">[</span></span><br><span class="line"><span class="comment">// 专门用来接收父组件的数据</span></span><br><span class="line">     <span class="string">&quot;test&quot;</span></span><br><span class="line">    <span class="punctuation">]</span><span class="punctuation">,</span></span><br></pre></td></tr></table></figure>

<p>而子组件不能直接修改父组件中的数据，否则会报错并且只能给当前组件修改，要想修改父组件中的数据，则只能通过自定义函数去修改。</p>
<h4 id="子组件传递给父组件"><a href="#子组件传递给父组件" class="headerlink" title="子组件传递给父组件"></a>子组件传递给父组件</h4><p><em><strong>子传父</strong></em>：在<strong>父组件</strong>中通过设定<strong>自定义事件</strong>，在子组件中通过点击事件在<code>methods</code>函数中设定方法，利用<code>this.$emit</code>来<strong>触发</strong>父组件的自定义事件,<code>$emit</code>的参数为：第一个参数为<strong>触发的函数</strong>，第二个参数开始就是给父组件传递参数；在父组件<code>methods</code>函数中设定方法，给自定义事件进行传参，之后通过<code>this.xxx=xxx</code>进行<strong>修改</strong>父组件的数据。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 父组件 --&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">VueList</span> @<span class="attr">index</span>=<span class="string">&quot;change&quot;</span> <span class="attr">data-index</span>=<span class="string">&quot;123&quot;</span> <span class="attr">:test</span>=<span class="string">&quot;str2&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">data()<span class="punctuation">&#123;</span><span class="comment">//定义数据</span></span><br><span class="line">        <span class="comment">// 必须要有返回值</span></span><br><span class="line">        return<span class="punctuation">&#123;</span></span><br><span class="line">        str2<span class="punctuation">:</span>&#x27;hello world&#x27;<span class="punctuation">,</span></span><br><span class="line">        num<span class="punctuation">:</span><span class="number">10</span><span class="punctuation">,</span></span><br><span class="line">        isShow<span class="punctuation">:</span><span class="keyword">true</span><span class="punctuation">,</span></span><br><span class="line">        <span class="punctuation">&#125;</span></span><br><span class="line"></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    methods<span class="punctuation">:</span><span class="punctuation">&#123;</span></span><br><span class="line">        change(a)<span class="punctuation">&#123;</span></span><br><span class="line">            console.log(a);</span><br><span class="line">            this.str2=a;</span><br><span class="line">        <span class="punctuation">&#125;</span></span><br><span class="line">    <span class="punctuation">&#125;</span>;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 子组件 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;show&quot;</span>&gt;</span>显示父组件传过来的数据<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">methods<span class="punctuation">:</span><span class="punctuation">&#123;</span></span><br><span class="line">        show()<span class="punctuation">&#123;</span></span><br><span class="line">            <span class="comment">// 不能直接修改父组件的内容，否则直接报错，只给当前组件自己修改，想要修改必须先要给父组件提示</span></span><br><span class="line">             this.$emit(<span class="string">&quot;index&quot;</span><span class="punctuation">,</span><span class="string">&quot;回不去的小山路&quot;</span>);<span class="comment">//$emit触发自定义事件的触发方式,第一个参数为触发的函数，第二个参数开始就是给父组件传递参数</span></span><br><span class="line">             <span class="punctuation">&#125;</span></span><br><span class="line">    <span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<h2 id="计算属性和侦听器"><a href="#计算属性和侦听器" class="headerlink" title="计算属性和侦听器"></a>计算属性和侦听器</h2><h3 id="计算属性"><a href="#计算属性" class="headerlink" title="计算属性"></a>计算属性</h3><p>模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。因此尽量不要把逻辑语放到标签内。</p>
<p>例如：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;product&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">computed<span class="punctuation">:</span><span class="punctuation">&#123;</span><span class="comment">//需要计算或者表示逻辑的都写在computed中。计算数据</span></span><br><span class="line">        product<span class="punctuation">:</span>function()<span class="punctuation">&#123;</span></span><br><span class="line">            return this.str2.split(<span class="string">&quot;&quot;</span>).reverse().join(<span class="string">&quot;&quot;</span>);<span class="comment">//对原有字符串进行翻转</span></span><br><span class="line">        <span class="punctuation">&#125;</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br></pre></td></tr></table></figure>

<p>在这个地方，模板不再是简单的<strong>声明式逻辑</strong>。你必须看一段时间才能意识到，这里是想要显示变量 <strong>str2</strong> 的翻转字符串。当你想要在模板中的多处包含此<strong>翻转字符串</strong>时，就会更加难以处理。</p>
<p>所以，对于任何复杂逻辑，你都应当使用<strong>计算属性</strong>。</p>
<h3 id="侦听器"><a href="#侦听器" class="headerlink" title="侦听器"></a>侦听器</h3><p>Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，可以侦听属性前后的变化。</p>
<p>例如：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;product&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">computed<span class="punctuation">:</span><span class="punctuation">&#123;</span><span class="comment">//需要计算或者表示逻辑的都写在computed中。计算数据</span></span><br><span class="line">        product<span class="punctuation">:</span>function()<span class="punctuation">&#123;</span></span><br><span class="line">            return this.str2.split(<span class="string">&quot;&quot;</span>).reverse().join(<span class="string">&quot;&quot;</span>);<span class="comment">//对原有字符串进行翻转</span></span><br><span class="line">        <span class="punctuation">&#125;</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">watch<span class="punctuation">:</span><span class="punctuation">&#123;</span><span class="comment">//侦听数据的变化</span></span><br><span class="line">        str2<span class="punctuation">:</span>function(old<span class="punctuation">,</span>news)<span class="punctuation">&#123;</span></span><br><span class="line">            console.log(old<span class="punctuation">,</span>news);</span><br><span class="line">        <span class="punctuation">&#125;</span></span><br><span class="line">    <span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<h2 id="插槽"><a href="#插槽" class="headerlink" title="插槽"></a>插槽</h2><p>为具名插槽和作用域插槽引入了一个新的统一的语法 (即 <strong>v-slot</strong> 指令)</p>
<h3 id="插槽内容"><a href="#插槽内容" class="headerlink" title="插槽内容"></a>插槽内容</h3><p>Vue 实现了一套内容分发的 API，，将 <slot> 元素作为承载分发内容的出口。</p>
<p>它允许你像这样合成组件：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 父组件 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">VueList</span> @<span class="attr">index</span>=<span class="string">&quot;change&quot;</span> <span class="attr">data-index</span>=<span class="string">&quot;123&quot;</span> <span class="attr">:test</span>=<span class="string">&quot;str2&quot;</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">span</span>&gt;</span>我是span标签<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">VueList</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 子组件 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">slot</span>&gt;</span><span class="tag">&lt;/<span class="name">slot</span>&gt;</span><span class="comment">&lt;!--插槽，让子组件中的内容生效，具有重复可控性 ，可在父组件中复制多个 --&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="生命周期"><a href="#生命周期" class="headerlink" title="生命周期"></a>生命周期</h2><p>所有生命周期的 this 上下文将自动绑定至实例中，因此你可以访问 <code>data</code>、<code>computed</code> 和 <code>methods</code>。这意味着你不应该使用箭头函数来定义一个生命周期方法(<code>例如 created: () =&gt; this.fetchTodos()</code>)。因为箭头函数绑定了父级上下文，所以 this 不会指向预期的组件实例，并且<code>this.fetchTodos</code> 将会是 undefined。</p>
<p>生命周期主要分为四个阶段：初始化阶段、挂载阶段、更新阶段、销毁阶段。<br>每调用一次子组件就会生成一次生命周期。</p>
<h3 id="beforeCreate-初始化-x2F-实例化之前"><a href="#beforeCreate-初始化-x2F-实例化之前" class="headerlink" title="beforeCreate(初始化&#x2F;实例化之前)"></a>beforeCreate(初始化&#x2F;实例化之前)</h3><h4 id="详细"><a href="#详细" class="headerlink" title="详细"></a>详细</h4><p>在实例初始化之后,进行数据侦听和事件&#x2F;侦听器的配置之前同步调用。</p>
<h3 id="created（已完成实例化数据）"><a href="#created（已完成实例化数据）" class="headerlink" title="created（已完成实例化数据）"></a>created（已完成实例化数据）</h3><h4 id="详细-1"><a href="#详细-1" class="headerlink" title="详细"></a>详细</h4><p>在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件&#x2F;侦听器的回调函数。然而，挂载阶段还没开始，且 <code>$el property </code>目前尚不可用。</p>
<h3 id="beforeMount-挂载前"><a href="#beforeMount-挂载前" class="headerlink" title="beforeMount(挂载前)"></a>beforeMount(挂载前)</h3><h4 id="详细-2"><a href="#详细-2" class="headerlink" title="详细"></a>详细</h4><p>在挂载开始之前被调用：相关的 render 函数首次被调用</p>
<h3 id="mounted（已完成挂载）"><a href="#mounted（已完成挂载）" class="headerlink" title="mounted（已完成挂载）"></a>mounted（已完成挂载）</h3><h4 id="详细-3"><a href="#详细-3" class="headerlink" title="详细"></a>详细</h4><p>实例被挂载后调用，<strong>注意</strong> mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 <code>vm.$nextTick</code>：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">mounted<span class="punctuation">:</span> function () <span class="punctuation">&#123;</span></span><br><span class="line">  this.$nextTick(function () <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="comment">// 仅在整个视图都被渲染之后才会运行的代码</span></span><br><span class="line">  <span class="punctuation">&#125;</span>)</span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>
<h3 id="beforeUpdate-数据更新，视图未更新"><a href="#beforeUpdate-数据更新，视图未更新" class="headerlink" title="beforeUpdate(数据更新，视图未更新)"></a>beforeUpdate(数据更新，视图未更新)</h3><h4 id="详细-4"><a href="#详细-4" class="headerlink" title="详细"></a>详细</h4><p>在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。</p>
<h3 id="updated-（数据更新、视图更新完毕）"><a href="#updated-（数据更新、视图更新完毕）" class="headerlink" title="updated （数据更新、视图更新完毕）"></a>updated （数据更新、视图更新完毕）</h3><h4 id="详细-5"><a href="#详细-5" class="headerlink" title="详细"></a>详细</h4><p>在数据更改导致的<strong>虚拟 DOM 重新渲染和更新完毕之后</strong>被调用。</p>
<h3 id="beforeDestroy（销毁之前的数据）"><a href="#beforeDestroy（销毁之前的数据）" class="headerlink" title="beforeDestroy（销毁之前的数据）"></a>beforeDestroy（销毁之前的数据）</h3><h4 id="详细-6"><a href="#详细-6" class="headerlink" title="详细"></a>详细</h4><p>实例销毁之前调用。在这一步，实例仍然完全可用。</p>
<h3 id="destroyed（销毁之后的数据）"><a href="#destroyed（销毁之后的数据）" class="headerlink" title="destroyed（销毁之后的数据）"></a>destroyed（销毁之后的数据）</h3><h4 id="详细-7"><a href="#详细-7" class="headerlink" title="详细"></a>详细</h4><p>实例销毁后调用。</p>

      
    </div>
    
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2022/03/17/vue-day-03/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">&lt;</strong>
      <div class="article-nav-title">
        
          vue-入门Day.03
        
      </div>
    </a>
  
  
    <a href="/2022/03/15/vue-day01/" id="article-nav-older" class="article-nav-link-wrap">
      <div class="article-nav-title">vue-入门Day.01</div>
      <strong class="article-nav-caption">&gt;</strong>
    </a>
  
</nav>

  
</article>


<div class="ds-share share" data-thread-key="vue-day.02" data-title="vue-入门Day.02" data-url="http://example.com/2022/03/16/vue-day.02/"  data-images="http://7xkj1z.com1.z0.glb.clouddn.com/head.jpg" data-content="vue-入门Day.02">
    <div class="ds-share-inline">
      <ul  class="ds-share-icons-16">
      	<li data-toggle="ds-share-icons-more"><a class="ds-more" href="javascript:void(0);">分享到：</a></li>
        <li><a class="ds-weibo" href="javascript:void(0);" data-service="weibo">微博</a></li>
        <li><a class="ds-qzone" href="javascript:void(0);" data-service="qzone">QQ空间</a></li>
        <li><a class="ds-qqt" href="javascript:void(0);" data-service="qqt">腾讯微博</a></li>
        <li><a class="ds-wechat" href="javascript:void(0);" data-service="wechat">微信</a></li>
      </ul>
      <div class="ds-share-icons-more">
      </div>
    </div>
 </div>
 





</div>
      <footer id="footer">
  <div class="outer">
    <div id="footer-info">
      <div class="footer-left">
        &copy; 2022 John Doe
      </div>
        <div class="footer-right">
          <a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/smackgg/hexo-theme-smackdown" target="_blank">Smackdown</a>
        </div>
    </div>
  </div>
</footer>
    </div>
    
  
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">



<script>
	var yiliaConfig = {
		fancybox: true,
		mathjax: true,
		animate: true,
		isHome: false,
		isPost: true,
		isArchive: false,
		isTag: false,
		isCategory: false,
		open_in_new: false
	}
</script>

<script src="/js/main.js"></script>




<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
        processEscapes: true,
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
    }
});

MathJax.Hub.Queue(function() {
    var all = MathJax.Hub.getAllJax(), i;
    for(i=0; i < all.length; i += 1) {
        all[i].SourceElement().parentNode.className += ' has-jax';                 
    }       
});
</script>

<script src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js"></script>


  </div>
</body>
</html>